<template>
  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="450px" :title="`${drawerProps.title}用户`">
    <el-form
      ref="ruleFormRef"
      label-width="100px"
      label-suffix=" :"
      :rules="rules"
      :disabled="drawerProps.isView"
      :model="drawerProps.row"
      :hide-required-asterisk="drawerProps.isView"
    >
      <el-form-item label="上级菜单" prop="parentId">
        <treeselect
          v-model="drawerProps.row.parentId"
          :options="selectRouterMenu"
          :normalizer="normalizer"
          :show-count="true"
          placeholder="选择上级菜单"
          class="treeselect"
        />
      </el-form-item>
      <el-form-item label="菜单类型" prop="menuType">
        <el-radio-group v-model="drawerProps.row.menuType">
          <el-radio label="M">目录</el-radio>
          <el-radio label="C">菜单</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="菜单名称" prop="title">
        <el-input v-model="drawerProps.row!.title" placeholder="请填写菜单名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="页面名称" prop="name">
        <el-input v-model="drawerProps.row!.name" placeholder="请填写页面名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="路由地址" prop="path">
        <el-input v-model="drawerProps.row!.path" placeholder="请填写路由地址" clearable></el-input>
      </el-form-item>
      <el-form-item label="页面地址" prop="component" v-if="drawerProps.row.menuType === 'C'">
        <el-input v-model="drawerProps.row!.component" placeholder="请填写页面地址" clearable></el-input>
      </el-form-item>
      <el-form-item label="菜单图标" prop="icon">
        <SelectIcon
          v-model="drawerProps.row!.icon"
          :iconValue="drawerProps.row!.icon"
          @update:iconValue="drawerProps.row!.icon = $event"
        />
      </el-form-item>
      <el-form-item label="重定向地址" prop="redirect" v-if="drawerProps.row.menuType === 'M'">
        <el-input v-model="drawerProps.row!.redirect" placeholder="请填写重定向地址" clearable></el-input>
      </el-form-item>
      <el-form-item label="显示状态" prop="isHide">
        <el-radio-group v-model="drawerProps.row!.isHide">
          <el-radio :label="1">隐藏</el-radio>
          <el-radio :label="0">显示</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="一级路由" prop="isFull">
        <el-radio-group v-model="drawerProps.row!.isFull">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="缓存状态" prop="isKeepAlive">
        <el-radio-group v-model="drawerProps.row!.isKeepAlive">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="drawerVisible = false"> 取消 </el-button>
      <el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit"> 确定 </el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts" name="UserDrawer">
import { ref, reactive, onMounted } from "vue";
import { genderType } from "@/utils/serviceDict";
import { ElMessage, FormInstance } from "element-plus";
import { User } from "@/api/interface";
// import the component
import Treeselect from "vue3-treeselect";
// import the styles
import "vue3-treeselect/dist/vue3-treeselect.css";
import UploadImg from "@/components/Upload/Img.vue";
import UploadImgs from "@/components/Upload/Imgs.vue";
import { getMenuListApi } from "@/api/modules/login";
import { deepClone } from "@/utils/index";
import SelectIcon from "@/components/SelectIcon/index.vue";

const rules = reactive({
  parentId: [{ required: true, message: "请选择上级菜单", trigger: "change" }],
  name: [{ required: true, message: "请填写页面名称" }],
  menuType: [{ required: true, message: "请选择菜单类型", trigger: "change" }],
  title: [{ required: true, message: "请填写菜单名称" }],
  path: [{ required: true, message: "请填写路由地址" }],
  component: [{ required: true, message: "请填写页面地址" }],
  icon: [{ required: true, message: "请选择icon图标", trigger: "change" }],
  isHide: [{ required: true, message: "请选择显示状态", trigger: "change" }],
  isFull: [{ required: true, message: "请选择是否为一级路由", trigger: "change" }],
  isKeepAlive: [{ required: true, message: "请选择是否缓存", trigger: "change" }],
  redirect: [{ required: true, message: "请填写路由重定向地址" }]
});

let routerMenu = ref<any>([]);
let selectRouterMenu = ref<any>([]);

onMounted(async () => {
  let result: any = await getMenuListApi();
  routerMenu.value = result.data.routerMenu;
  selectRouterMenu.value = deepClone(routerMenu.value); // 通过.value访问ref的值
  selectRouterMenu.value.unshift({
    title: "一级菜单",
    id: 0
  });
});

const normalizer = (data: any) => {
  if (data.children && !data.children.length) {
    delete data.children;
  }
  return {
    id: data.id,
    label: data.title,
    children: data.children
  };
};

interface DrawerProps {
  title: string;
  isView: boolean;
  row: any;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  row: {}
});

// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
  drawerProps.value = params;
  drawerVisible.value = true;
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  ruleFormRef.value!.validate(async valid => {
    if (!valid) return;
    try {
      if (drawerProps.value.row.menuType === "M") drawerProps.value.row.component = "/";
      if (drawerProps.value.row.menuType === "C") drawerProps.value.row.redirect = "";
      await drawerProps.value.api!(drawerProps.value.row);
      ElMessage.success({ message: `${drawerProps.value.title}用户成功！` });
      drawerProps.value.getTableList!();
      drawerVisible.value = false;
      if (drawerProps.value.title === "新增") location.reload();
    } catch (error) {
      console.log(error);
    }
  });
};

defineExpose({
  acceptParams
});
</script>

<style lang="scss" scoped>
:deep(.vue-treeselect__control, .treeselect) {
  background-color: var(--el-bg-color);
  color: var(--el-text-color-regular);
}
:deep(.vue-treeselect__menu) {
  background-color: var(--el-bg-color);
  color: var(--el-text-color-regular);
  .vue-treeselect__list-item {
    .vue-treeselect__option--highlight {
      background: var(--el-color-info-dark-2);
    }
  }
}
</style>